<template>
	<view>
		<view class="mx-32">
			<view class="font-48 font-bold mb-12">请填写以下个人信息</view>
			<view class="subtitle mb-24 font-24">填写以下信息,个人信息仅用于审核，提交后不可修改。</view>
		</view>
		<view class="form-box">
			<u-form :model="form" ref="uForm" label-width="140" label-position="top">
				<u-form-item label="姓名" prop="fullName">
					<u-input v-model="form.fullName" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u-input v-model="form.phone" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item label="身份证号">
					<u-input v-model="form.idCard" placeholder="请输入身份证号" />
				</u-form-item>
				<u-form-item label="性别">
					<u-radio-group v-model="form.sex">
						<u-radio v-for="(item, index) in sexList" :key="index" :name="item.value"
							:disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="身份证正面" prop="idFront" :border-bottom="false">
					<view class="row-voucher">
						<view class="image-list">
							<!-- 图片列表 -->
							<view class="image-preview" v-if="imageIdFrontUrl" @click="chooseImage('idFront')">
								<image class="image" mode="aspectFill" :src="imageIdFrontUrl"></image>
							</view>
							<!-- 上传图片 -->
							<view v-if="!imageIdFrontUrl" class="image-picker"
								@click="chooseImage('idFront')">
								<u-icon name="plus" color="#B4B4B4" size="38"></u-icon>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="身份证反面" prop="idOpposite" :border-bottom="false">
					<view class="row-voucher">
						<view class="image-list">
							<!-- 图片列表 -->
							<view class="image-preview" v-if="imageIdOppositeUrl" @click="chooseImage('idOpposite')">
								<image class="image" mode="aspectFill" :src="imageIdOppositeUrl"></image>
							</view>
							<!-- 上传图片 -->
							<view v-if="!imageIdOppositeUrl" class="image-picker"
								@click="chooseImage('idOpposite')">
								<u-icon name="plus" color="#B4B4B4" size="38"></u-icon>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="学生证" prop="idStudent" :border-bottom="false">
					<view class="row-voucher">
						<view class="image-list">
							<!-- 图片列表 -->
							<view class="image-preview" v-if="imageIdStudentUrl" @click="chooseImage('idStudent')">
								<image class="image" mode="aspectFill" :src="imageIdStudentUrl"></image>
							</view>
							<!-- 上传图片 -->
							<view v-if="!imageIdStudentUrl" class="image-picker"
								@click="chooseImage('idStudent')">
								<u-icon name="plus" color="#B4B4B4" size="38"></u-icon>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="入驻校区" right-icon="arrow-right">
					<u-input v-model="form.schoolName" disabled placeholder="请选择入驻校区" @click="schoolShow = true" />
				</u-form-item>
				<u-form-item label="工作类型">
					<u-radio-group v-model="form.workType">
						<u-radio v-for="(item, index) in workTypeList" :key="index" :name="item.value"
							:disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<!-- <u-form-item label="审核原因">
					<u-input type="textarea" v-model="form.reason" placeholder="请输入原因" />
				</u-form-item> -->
			</u-form>
			<view class="py-30">
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
		</view>
		<u-select v-model="schoolShow" :list="schoolList" @confirm="schoolConfirm" value-name="id" label-name="name"
			safe-area-inset-bottom></u-select>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/common/request/baseurl.js';
	import * as upload from '@/common/request/upload.js';
	import {
		isMobile
	} from '@/utils/verify'
	const sexList = [{
		value:'1',
		name: '男',
	}, {
	    value:'0',
		name: '女',
	}, ]
	const workTypeList = [{
		value:'0',
		name: '兼职',
	},{
		value:'1',
		name: '全职',
	}]
	// 表单验证规则
	const rules = {
		fullName: [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}],
		phone: [{
			required: true,
			message: '请输入正确的手机号',
			validator: (rule, value, callback) => {
				return isMobile(value);
			},
			trigger: ['blur', 'change']
		}],
		idCard: [{
			required: true,
			message: '请输入身份证号',
			trigger: ['blur', 'change']
		}]
	}
	export default {
		data() {
			return {
			    imageIdStudentUrl:"",
				imageIdOppositeUrl:"",//展示
				imageIdFrontUrl:"",//展示
				sexList,
				workTypeList,
				schoolList: [],
				form: {
					id: '',
					fullName: '',
					phone: '',
					idCard: '',
					sex: '0',
					idFront: '',
					schoolId: '',
					reason: '',
					idFront:'',
					idOpposite:'',
					idStudent:'',
				},
				idFrontUrllList: [],
				idFrontSrcList: [], // 回显时用的数组，如果不需要回显则删除即可
				schoolShow: false,
				rules
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(){
			this.getComSchoolData();
		},
		methods: {
			//获取校园
			getComSchoolData(){
				this.$u.api.getComSchool({}).then(res=>{
					this.schoolList = res.dataList;
				})
			},
			// 删除所选图片
			deleteImage(imageIndex) {
				this.idFrontUrllList.splice(imageIndex, 1);
			},
			deleteSrcImage(imageIndex) {
				this.idFrontSrcList.splice(imageIndex, 1);
			},
			// 点击新增图片 由于uview的上传组件不好用，此处自己写，然后太晚了，不想封装了，就复制粘贴吧，空了我专门写个移动端的上传组件
			// 这个地方只做一个字段的示例，此处是多个组件，所以需要去判断是哪个地方传进来的
			chooseImage(type) {
				// 选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: async ({
						tempFiles
					}) => {
						this.uploadFile(tempFiles[0].path, type);
					}
				});
			},
			uploadFile(image, type) {
				try {
					uni.uploadFile({
						url: baseUrl + upload.upload, //接口地址写在上方upload里
						filePath: image,
						header:{
							publictoken: uni.getStorageSync('riderToken')
						},
						name: 'file',
						success: (uploadFileRes) => {
							// 此处去赋值,将返回的链接复制在上方
							if (type == 'idFront') {
								let obj = JSON.parse(JSON.stringify(uploadFileRes));
								let message = JSON.parse(JSON.stringify(obj.data));
								let objData = JSON.parse(message);
								this.imageIdFrontUrl = objData.data.generateUrl;
								this.form.idFront = objData.data.id;
							}
							if(type == 'idOpposite'){
								let obj = JSON.parse(JSON.stringify(uploadFileRes));
								let message = JSON.parse(JSON.stringify(obj.data));
								let objData = JSON.parse(message);
								this.imageIdOppositeUrl = objData.data.generateUrl;
								this.form.idOpposite = objData.data.id;
							}
							if(type == 'idStudent'){
								let obj = JSON.parse(JSON.stringify(uploadFileRes));
								let message = JSON.parse(JSON.stringify(obj.data));
								let objData = JSON.parse(message);
								this.imageIdStudentUrl = objData.data.generateUrl;
								this.form.idStudent = objData.data.id;
							}
						},
						fail: (err) => {
							console.log(err);
						}
					});
				} catch (error) {
					console.log(error);
					this.$u.toast('上传失败，请重新上传');

				}
			},
			// 选择学校数据
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			schoolConfirm(e) {
				this.form.schoolId = e[0].value;
				this.form.schoolName = e[0].label;
			},
			// 提交数据
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 正则规则无法检验非输入框字段，故在此处进行判断
						if(!this.form.idFront) return this.$u.toast('请上传身份证正面照');
						if(!this.form.idOpposite) return this.$u.toast('请上传身份证反面照');
						if(!this.form.idStudent) return this.$u.toast('请上传学生证');
						if(!this.form.schoolId) return this.$u.toast('请选择入驻校区');
						this.form.deliveryId = uni.getStorageSync('riderUserInfo').id;
						this.form.isPass = 2;
						this.$u.api.addDeliveryExamine(this.form).then(res=>{
							if(res.code == 200){
								this.$ut.route('pages/rider/index', {}, 'tab');
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.form-box {
		margin: 24rpx 32rpx;
	}

	.subtitle {
		color: #cba04a;
	}

	.row-voucher {
		display: flex;
		flex-direction: column;

		.image-list {
			margin-top: 20rpx;
			margin-bottom: -20rpx;

			&:after {
				clear: both;
				content: " ";
				display: table;
			}

			.image {
				display: block;
				width: 100%;
				height: 100%;
			}


			.image-picker,
			.image-preview {
				width: 184rpx;
				height: 184rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				float: left;


			}

			.image-picker {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background: #F4F4F4;
				border: 1rpx dashed #B4B4B4;
				color: #ccc;

				.choose-icon {
					font-size: 48rpx;
					margin-bottom: 6rpx;
				}

				.choose-text {
					font-size: 24rpx;
				}
			}

			.image-preview {
				position: relative;

				.image-delete {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					height: 42rpx;
					width: 42rpx;
					line-height: 42rpx;
					background: rgba(0, 0, 0, 0.64);
					border-radius: 50%;
					color: #fff;
					font-weight: bolder;
					font-size: 22rpx;
					z-index: 10;
					text-align: center;
				}
			}
		}
	}

	::v-deep {
		.u-radio {
			margin-right: 200rpx;
		}
	}
</style>